<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端开发技术论坛 - 多元社交平台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #3b82f6;
            --primary-light: #eff6ff;
            --primary-dark: #2563eb;
            --secondary: #8b5cf6;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --dark: #1e293b;
            --light: #f8fafc;
            --gray: #64748b;
            --border: #e2e8f0;
            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #f1f5f9;
            color: var(--dark);
            line-height: 1.6;
        }
        
        .navbar {
            background-color: white;
            box-shadow: var(--shadow);
            padding: 0.75rem 1.5rem;
        }
        
        .navbar-brand {
            font-weight: 700;
            color: var(--primary);
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .search-container {
            max-width: 500px;
            width: 100%;
        }
        
        .search-input {
            width: 100%;
            padding: 0.6rem 1rem 0.6rem 2.5rem;
            border-radius: 25px;
            border: 1px solid var(--border);
            background-color: var(--light);
            transition: all 0.3s ease;
        }
        
        .search-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px var(--primary-light);
        }
        
        .search-icon {
            position: absolute;
            left: 0.8rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray);
        }
        
        .nav-link {
            color: var(--dark);
            font-weight: 500;
            margin: 0 0.5rem;
            transition: color 0.2s;
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }
        
        .nav-link:hover, .nav-link.active {
            color: var(--primary);
        }
        
        /* 论坛头部样式 */
        .forum-header {
            background-color: white;
            border-radius: 10px;
            box-shadow: var(--shadow);
            overflow: hidden;
            margin-bottom: 2rem;
        }
        
        .forum-banner {
            height: 200px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            position: relative;
        }
        
        .forum-banner-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 50%;
            background: linear-gradient(transparent, rgba(0,0,0,0.5));
        }
        
        .forum-info-bar {
            padding: 1.5rem;
            padding-top: 0;
            position: relative;
        }
        
        .forum-avatar {
            width: 120px;
            height: 120px;
            border-radius: 10px;
            background-color: white;
            border: 4px solid white;
            position: absolute;
            top: -60px;
            left: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            color: var(--primary);
            box-shadow: var(--shadow);
        }
        
        .forum-title-section {
            margin-left: 140px;
        }
        
        .forum-title {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        
        .forum-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            color: var(--gray);
            margin-bottom: 1rem;
        }
        
        .meta-item {
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }
        
        .forum-actions {
            display: flex;
            gap: 1rem;
        }
        
        .btn-primary {
            background-color: var(--primary);
            border-color: var(--primary);
            color: white;
            padding: 0.5rem 1.5rem;
            border-radius: 6px;
            font-weight: 500;
            transition: all 0.2s;
        }
        
        .btn-primary:hover {
            background-color: var(--primary-dark);
            border-color: var(--primary-dark);
        }
        
        .btn-outline {
            background-color: transparent;
            border: 1px solid var(--border);
            color: var(--dark);
            padding: 0.5rem 1.5rem;
            border-radius: 6px;
            font-weight: 500;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }
        
        .btn-outline:hover {
            border-color: var(--primary);
            color: var(--primary);
            background-color: var(--primary-light);
        }
        
        /* 论坛导航 */
        .forum-nav {
            border-top: 1px solid var(--border);
            display: flex;
            background-color: var(--light);
        }
        
        .forum-nav-item {
            padding: 1rem 1.5rem;
            color: var(--dark);
            text-decoration: none;
            font-weight: 500;
            transition: all 0.2s;
            border-bottom: 3px solid transparent;
        }
        
        .forum-nav-item:hover {
            color: var(--primary);
        }
        
        .forum-nav-item.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }
        
        /* 主内容区布局 */
        .main-content {
            display: flex;
            gap: 2rem;
        }
        
        .posts-section {
            flex: 1;
        }
        
        .sidebar {
            width: 300px;
            flex-shrink: 0;
        }
        
        /* 帖子筛选和排序 */
        .posts-filter {
            background-color: white;
            border-radius: 10px;
            padding: 1rem 1.25rem;
            margin-bottom: 1.5rem;
            box-shadow: var(--shadow);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .filter-tabs {
            display: flex;
            gap: 0.5rem;
        }
        
        .filter-tab {
            padding: 0.4rem 1rem;
            border-radius: 6px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .filter-tab.active {
            background-color: var(--primary);
            color: white;
        }
        
        .filter-tab:not(.active):hover {
            background-color: var(--light);
        }
        
        .sort-controls {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .sort-label {
            font-size: 0.9rem;
            color: var(--gray);
        }
        
        .sort-select {
            padding: 0.4rem 0.75rem;
            border-radius: 6px;
            border: 1px solid var(--border);
            font-size: 0.9rem;
        }
        
        /* 帖子列表样式 */
        .post-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .post-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .post-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-hover);
        }
        
        .post-header {
            padding: 1rem 1.25rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border);
        }
        
        .post-author {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .author-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-info {
            display: flex;
            flex-direction: column;
        }
        
        .author-name {
            font-weight: 600;
            font-size: 0.95rem;
        }
        
        .post-time {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        .post-menu-btn {
            background: none;
            border: none;
            color: var(--gray);
            cursor: pointer;
            font-size: 1.2rem;
        }
        
        .post-body {
            padding: 1.25rem;
        }
        
        .post-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: var(--dark);
            text-decoration: none;
        }
        
        .post-title:hover {
            color: var(--primary);
        }
        
        .post-content {
            margin-bottom: 1rem;
            line-height: 1.7;
        }
        
        .post-content p {
            margin-bottom: 0.75rem;
        }
        
        .post-content p:last-child {
            margin-bottom: 0;
        }
        
        .post-images {
            display: flex;
            gap: 0.75rem;
            margin-bottom: 1rem;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .post-images img {
            width: 100%;
            height: 180px;
            object-fit: cover;
            border-radius: 6px;
        }
        
        .post-images.single img {
            max-width: 600px;
        }
        
        .post-images.double img {
            width: 50%;
        }
        
        .post-images.triple img {
            width: 33.333%;
        }
        
        .post-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .post-tag {
            background-color: var(--primary-light);
            color: var(--primary);
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.8rem;
            text-decoration: none;
        }
        
        .post-tag:hover {
            background-color: var(--primary);
            color: white;
        }
        
        .post-footer {
            padding: 0.75rem 1.25rem;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: var(--light);
        }
        
        .post-actions {
            display: flex;
            gap: 1.5rem;
        }
        
        .post-action {
            display: flex;
            align-items: center;
            gap: 0.3rem;
            color: var(--gray);
            background: none;
            border: none;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
        }
        
        .post-action:hover {
            color: var(--primary);
            background-color: var(--primary-light);
        }
        
        .post-action.liked {
            color: var(--danger);
        }
        
        .post-action.bookmarked {
            color: var(--secondary);
        }
        
        /* 特殊帖子样式 */
        .post-card.pinned {
            border-left: 4px solid var(--primary);
        }
        
        .post-card.announcement {
            border-left: 4px solid var(--warning);
        }
        
        .post-badge {
            display: inline-block;
            padding: 0.2rem 0.6rem;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: 500;
            margin-right: 0.5rem;
        }
        
        .badge-pinned {
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        .badge-announcement {
            background-color: rgba(245, 158, 11, 0.1);
            color: var(--warning);
        }
        
        .badge-hot {
            background-color: rgba(239, 68, 68, 0.1);
            color: var(--danger);
        }
        
        /* 侧边栏样式 */
        .sidebar-widget {
            background-color: white;
            border-radius: 10px;
            box-shadow: var(--shadow);
            padding: 1.25rem;
            margin-bottom: 1.5rem;
        }
        
        .widget-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--border);
        }
        
        .forum-description {
            margin-bottom: 1rem;
            line-height: 1.7;
        }
        
        .forum-stats {
            display: flex;
            justify-content: space-between;
            margin-bottom: 1rem;
        }
        
        .stat-box {
            text-align: center;
        }
        
        .stat-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
        }
        
        .stat-label {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        .moderators-list {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }
        
        .moderator {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .moderator-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .moderator-info {
            flex: 1;
        }
        
        .moderator-name {
            font-weight: 500;
            font-size: 0.95rem;
        }
        
        .moderator-role {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        .top-posts {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .top-post {
            display: flex;
            gap: 0.75rem;
        }
        
        .top-post-number {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--gray);
            width: 24px;
            text-align: center;
        }
        
        .top-post-content {
            flex: 1;
        }
        
        .top-post-title {
            font-weight: 500;
            font-size: 0.95rem;
            margin-bottom: 0.25rem;
            color: var(--dark);
            text-decoration: none;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .top-post-title:hover {
            color: var(--primary);
        }
        
        .top-post-meta {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        .related-forums {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }
        
        .related-forum {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            text-decoration: none;
            color: var(--dark);
            padding: 0.5rem;
            border-radius: 6px;
            transition: background-color 0.2s;
        }
        
        .related-forum:hover {
            background-color: var(--light);
        }
        
        .related-forum-icon {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            background-color: var(--primary-light);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
        }
        
        .related-forum-info {
            flex: 1;
        }
        
        .related-forum-name {
            font-weight: 500;
            font-size: 0.95rem;
        }
        
        .related-forum-members {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        /* 分页样式 */
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 2rem;
            gap: 0.5rem;
        }
        
        .page-item {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: white;
            border: 1px solid var(--border);
            color: var(--dark);
            text-decoration: none;
            font-weight: 500;
            transition: all 0.2s;
        }
        
        .page-item:hover {
            border-color: var(--primary);
            color: var(--primary);
        }
        
        .page-item.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .page-item.disabled {
            color: var(--gray);
            border-color: var(--border);
            cursor: not-allowed;
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .main-content {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
            }
            
            .navbar {
                padding: 0.75rem 1rem;
            }
            
            .search-container {
                max-width: 300px;
            }
            
            .post-images {
                flex-direction: column;
            }
            
            .post-images.double img,
            .post-images.triple img {
                width: 100%;
            }
        }
        
        @media (max-width: 768px) {
            .search-container {
                max-width: 100%;
                margin: 1rem 0;
            }
            
            .forum-title-section {
                margin-left: 0;
                margin-top: 70px;
            }
            
            .forum-actions {
                flex-wrap: wrap;
                margin-bottom: 1rem;
            }
            
            .forum-nav {
                overflow-x: auto;
                white-space: nowrap;
            }
            
            .forum-nav-item {
                padding: 0.75rem;
                font-size: 0.9rem;
            }
            
            .posts-filter {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
            
            .post-title {
                font-size: 1.1rem;
            }
            
            .post-images img {
                height: 140px;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="fas fa-comments"></i> 多元论坛
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
                <i class="fas fa-bars"></i>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarContent">
                <div class="d-flex justify-content-center flex-grow-1">
                    <div class="search-container position-relative">
                        <i class="fas fa-search search-icon"></i>
                        <input type="text" class="search-input" placeholder="搜索论坛、帖子或用户...">
                    </div>
                </div>
                
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-home"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#"><i class="fas fa-th-large"></i> 论坛</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-compass"></i> 发现</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-bell"></i> 通知</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                            <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="rounded-circle" style="width: 36px; height: 36px; object-fit: cover;">
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#"><i class="fas fa-user me-2"></i> 个人中心</a></li>
                            <li><a class="dropdown-item" href="#"><i class="fas fa-bookmark me-2"></i> 我的收藏</a></li>
                            <li><a class="dropdown-item" href="#"><i class="fas fa-cog me-2"></i> 设置</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt me-2"></i> 退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <div class="container py-5">
        <!-- 论坛头部 -->
        <div class="forum-header">
            <div class="forum-banner">
                <div class="forum-banner-overlay"></div>
            </div>
            <div class="forum-info-bar">
                <div class="forum-avatar">
                    <i class="fas fa-laptop-code"></i>
                </div>
                <div class="forum-title-section">
                    <h1 class="forum-title">前端开发技术论坛</h1>
                    <div class="forum-meta">
                        <div class="meta-item">
                            <i class="fas fa-user"></i>
                            <span>12.5k 成员</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-file-alt"></i>
                            <span>34.2k 帖子</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-eye"></i>
                            <span>今日 2.8k 浏览</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-calendar-alt"></i>
                            <span>创建于 2020-03-15</span>
                        </div>
                    </div>
                    <div class="forum-actions">
                        <button class="btn-primary">
                            <i class="fas fa-pen"></i> 发布帖子
                        </button>
                        <button class="btn-outline">
                            <i class="fas fa-user-plus"></i> 邀请好友
                        </button>
                        <button class="btn-outline">
                            <i class="far fa-bookmark"></i> 收藏
                        </button>
                    </div>
                </div>
            </div>
            <div class="forum-nav">
                <a href="#" class="forum-nav-item active">
                    <i class="fas fa-fire-alt me-1"></i> 最新帖子
                </a>
                <a href="#" class="forum-nav-item">
                    <i class="fas fa-star me-1"></i> 精华内容
                </a>
                <a href="#" class="forum-nav-item">
                    <i class="fas fa-chart-line me-1"></i> 热门讨论
                </a>
                <a href="#" class="forum-nav-item">
                    <i class="fas fa-calendar-check me-1"></i> 活动公告
                </a>
                <a href="#" class="forum-nav-item">
                    <i class="fas fa-users me-1"></i> 成员列表
                </a>
                <a href="#" class="forum-nav-item">
                    <i class="fas fa-info-circle me-1"></i> 论坛介绍
                </a>
            </div>
        </div>
        
        <div class="main-content">
            <!-- 帖子列表区域 -->
            <div class="posts-section">
                <!-- 帖子筛选 -->
                <div class="posts-filter">
                    <div class="filter-tabs">
                        <div class="filter-tab active">全部</div>
                        <div class="filter-tab">讨论</div>
                        <div class="filter-tab">问答</div>
                        <div class="filter-tab">分享</div>
                        <div class="filter-tab">教程</div>
                    </div>
                    <div class="sort-controls">
                        <span class="sort-label">排序方式：</span>
                        <select class="sort-select">
                            <option value="latest">最新发布</option>
                            <option value="hot">热门程度</option>
                            <option value="comments">评论最多</option>
                            <option value="views">浏览最多</option>
                        </select>
                    </div>
                </div>
                
                <!-- 帖子列表 -->
                <div class="post-list">
                    <!-- 置顶公告帖子 -->
                    <div class="post-card pinned">
                        <div class="post-header">
                            <div class="post-author">
                                <img src="https://picsum.photos/100/100?random=10" alt="管理员头像" class="author-avatar">
                                <div class="author-info">
                                    <span class="author-name">论坛管理员</span>
                                    <span class="post-time">2023-06-15 10:30</span>
                                </div>
                            </div>
                            <button class="post-menu-btn">
                                <i class="fas fa-ellipsis-h"></i>
                            </button>
                        </div>
                        <div class="post-body">
                            <a href="#" class="post-title">
                                <span class="post-badge badge-pinned">置顶</span>
                                <span class="post-badge badge-announcement">公告</span>
                                论坛版规及新人指南 - 请新成员务必阅读
                            </a>
                            <div class="post-content">
                                <p>欢迎加入前端开发技术论坛！为了维护良好的社区环境，请所有成员遵守以下规定：</p>
                                <p>1. 禁止发布与前端开发无关的内容</p>
                                <p>2. 禁止发布广告、推广、传销等内容</p>
                                <p>3. 禁止人身攻击、辱骂、挑衅等不友善行为</p>
                                <p>4. 技术讨论请保持专业和尊重，鼓励分享和互助</p>
                                <p>5. 转载内容请注明出处，尊重原创</p>
                                <p>违反版规将根据情节轻重给予警告、禁言或封禁处理。祝大家在论坛交流愉快，共同进步！</p>
                            </div>
                        </div>
                        <div class="post-footer">
                            <div class="post-actions">
                                <button class="post-action">
                                    <i class="far fa-thumbs-up"></i>
                                    <span>128</span>
                                </button>
                                <button class="post-action">
                                    <i class="far fa-comment"></i>
                                    <span>36</span>
                                </button>
                                <button class="post-action">
                                    <i class="far fa-bookmark"></i>
                                    <span>收藏</span>
                                </button>
                                <button class="post-action">
                                    <i class="fas fa-share-alt"></i>
                                    <span>分享</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 带多图的帖子 -->
                    <div class="post-card">
                        <div class="post-header">
                            <div class="post-author">
                                <img src="https://picsum.photos/100/100?random=2" alt="用户头像" class="author-avatar">
                                <div class="author-info">
                                    <span class="author-name">张前端</span>
                                    <span class="post-time">2小时前</span>
                                </div>
                            </div>
                            <button class="post-menu-btn">
                                <i class="fas fa-ellipsis-h"></i>
                            </button>
                        </div>
                        <div class="post-body">
                            <a href="#" class="post-title">
                                <span class="post-badge badge-hot">热门</span>
                                我用Tailwind CSS重构了个人博客，分享一些使用心得
                            </a>
                            <div class="post-content">
                                <p>最近把我的个人博客用Tailwind CSS重构了一遍，从之前的传统CSS切换到原子化CSS方案，开发效率提升了不少。</p>
                                <p>主要分享几点使用感受：</p>
                                <p>1. 开发速度确实快，不用再为命名烦恼</p>
                                <p>2. 响应式设计非常方便，断点系统很直观</p>
                                <p>3. 配合@apply可以提取常用样式，保持代码整洁</p>
                                <p>4. 生产环境通过PurgeCSS可以大幅减小体积</p>
                            </div>
                            <div class="post-images triple">
                                <img src="https://picsum.photos/400/300?random=20" alt="博客首页截图">
                                <img src="https://picsum.photos/400/300?random=21" alt="文章页面截图">
                                <img src="https://picsum.photos/400/300?random=22" alt="移动端适配截图">
                            </div>
                            <div class="post-tags">
                                <a href="#" class="post-tag">Tailwind CSS</a>
                                <a href="#" class="post-tag">前端开发</a>
                                <a href="#" class="post-tag">博客搭建</a>
                                <a href="#" class="post-tag">CSS</a>
                            </div>
                        </div>
                        <div class="post-footer">
                            <div class="post-actions">
                                <button class="post-action liked">
                                    <i class="fas fa-thumbs-up"></i>
                                    <span>245</span>
                                </button>
                                <button class="post-action">
                                    <i class="far fa-comment"></i>
                                    <span>42</span>
                                </button>
                                <button class="post-action">
                                    <i class="far fa-bookmark"></i>
                                    <span>收藏</span>
                                </button>
                                <button class="post-action">
                                    <i class="fas fa-share-alt"></i>
                                    <span>分享</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 问答类型帖子 -->
                    <div class="post-card">
                        <div class="post-header">
                            <div class="post-author">
                                <img src="https://picsum.photos/100/100?random=3" alt="用户头像" class="author-avatar">
                                <div class="author-info">
                                    <span class="author-name">李小白</span>
                                    <span class="post-time">昨天 15:47</span>
                                </div>
                            </div>
                            <button class="post-menu-btn">
                                <i class="fas fa-ellipsis-h"></i>
                            </button>
                        </div>
                        <div class="post-body">
                            <a href="#" class="post-title">请教一个React Hooks性能优化的问题</a>
                            <div class="post-content">
                                <p>大家好，我在使用React Hooks开发一个表单页面时遇到了性能问题。</p>
                                <p>场景是这样的：我有一个包含多个输入框的表单，每个输入框都用useState管理状态，当表单字段很多时（比如20+），输入时会有明显的卡顿。</p>
                                <p>我尝试过使用useCallback和useMemo来缓存函数和值，但效果不明显。请问大家有没有遇到类似的问题，是如何解决的？</p>
                                <p>是否应该将多个state合并成一个对象，或者使用useReducer会更好？</p>
                            </div>
                            <div class="post-tags">
                                <a href="#" class="post-tag">React</a>
                                <a href="#" class="post-tag">Hooks</a>
                                <a href="#" class="post-tag">性能优化</a>
                                <a href="#" class="post-tag">前端问答</a>
                            </div>
                        </div>
                        <div class="post-footer">
                            <div class="post-actions">
                                <button class="post-action">
                                    <i class="far fa-thumbs-up"></i>
                                    <span>36</span>
                                </button>
                                <button class="post-action">
                                    <i class="far fa-comment"></i>
                                    <span>18</span>
                                </button>
                                <button class="post-action bookmarked">
                                    <i class="fas fa-bookmark"></i>
                                    <span>已收藏</span>
                                </button>
                                <button class="post-action">
                                    <i class="fas fa-share-alt"></i>
                                    <span>分享</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 带单图的帖子 -->
                    <div class="post-card">
                        <div class="post-header">
                            <div class="post-author">
                                <img src="https://picsum.photos/100/100?random=4" alt="用户头像" class="author-avatar">
                                <div class="author-info">
                                    <span class="author-name">王程序</span>
                                    <span class="post-time">3天前</span>
                                </div>
                            </div>
                            <button class="post-menu-btn">
                                <i class="fas fa-ellipsis-h"></i>
                            </button>
                        </div>
                        <div class="post-body">
                            <a href="#" class="post-title">分享一个自己开发的Vue组件库，包含50+常用组件</a>
                            <div class="post-content">
                                <p>经过半年多的开发和迭代，我的Vue组件库终于达到了可以分享的阶段。这个组件库基于Vue 3和TypeScript开发，包含了50多个常用组件，如表格、表单、弹窗、导航等。</p>
                                <p>特点：</p>
                                <p>• 完全基于Composition API开发</p>
                                <p>• 支持按需引入，减小打包体积</p>
                                <p>• 完善的TypeScript类型定义</p>
                                <p>• 支持主题定制和深色模式</p>
                                <p>已开源到GitHub，欢迎大家试用并提出宝贵意见！</p>
                            </div>
                            <div class="post-images single">
                                <img src="https://picsum.photos/800/400?random=30" alt="Vue组件库演示截图">
                            </div>
                            <div class="post-tags">
                                <a href="#" class="post-tag">Vue</a>
                                <a href="#" class="post-tag">组件库</a>
                                <a href="#" class="post-tag">TypeScript</a>
                                <a href="#" class="post-tag">开源项目</a>
                            </div>
                        </div>
                        <div class="post-footer">
                            <div class="post-actions">
                                <button class="post-action">
                                    <i class="far fa-thumbs-up"></i>
                                    <span>156</span>
                                </button>
                                <button class="post-action">
                                    <i class="far fa-comment"></i>
                                    <span>63</span>
                                </button>
                                <button class="post-action">
                                    <i class="far fa-bookmark"></i>
                                    <span>收藏</span>
                                </button>
                                <button class="post-action">
                                    <i class="fas fa-share-alt"></i>
                                    <span>分享</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 纯文字教程帖子 -->
                    <div class="post-card">
                        <div class="post-header">
                            <div class="post-author">
                                <img src="https://picsum.photos/100/100?random=5" alt="用户头像" class="author-avatar">
                                <div class="author-info">
                                    <span class="author-name">赵老师</span>
                                    <span class="post-time">1周前</span>
                                </div>
                            </div>
                            <button class="post-menu-btn">
                                <i class="fas fa-ellipsis-h"></i>
                            </button>
                        </div>
                        <div class="post-body">
                            <a href="#" class="post-title">从零开始学习WebAssembly：如何将C代码编译为前端可用的模块</a>
                            <div class="post-content">
                                <p>WebAssembly已经成为前端性能优化的重要手段，特别是对于计算密集型应用。本文将详细介绍如何将C语言代码编译为WebAssembly模块，并在JavaScript中调用。</p>
                                <p>本文主要内容：</p>
                                <p>1. Emscripten环境搭建</p>
                                <p>2. 编写适合编译为WASM的C代码</p>
                                <p>3. 编译选项详解与优化</p>
                                <p>4. JavaScript与WASM交互方式</p>
                                <p>5. 实际案例：用WASM优化图像处理算法</p>
                                <p>通过本文，即使没有C语言基础，也能快速上手WebAssembly开发。</p>
                            </div>
                            <div class="post-tags">
                                <a href="#" class="post-tag">WebAssembly</a>
                                <a href="#" class="post-tag">C语言</a>
                                <a href="#" class="post-tag">前端性能</a>
                                <a href="#" class="post-tag">教程</a>
                            </div>
                        </div>
                        <div class="post-footer">
                            <div class="post-actions">
                                <button class="post-action">
                                    <i class="far fa-thumbs-up"></i>
                                    <span>208</span>
                                </button>
                                <button class="post-action">
                                    <i class="far fa-comment"></i>
                                    <span>74</span>
                                </button>
                                <button class="post-action bookmarked">
                                    <i class="fas fa-bookmark"></i>
                                    <span>已收藏</span>
                                </button>
                                <button class="post-action">
                                    <i class="fas fa-share-alt"></i>
                                    <span>分享</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 分页 -->
                <div class="pagination">
                    <a href="#" class="page-item disabled">
                        <i class="fas fa-chevron-left"></i>
                    </a>
                    <a href="#" class="page-item active">1</a>
                    <a href="#" class="page-item">2</a>
                    <a href="#" class="page-item">3</a>
                    <a href="#" class="page-item">4</a>
                    <a href="#" class="page-item">5</a>
                    <span class="page-item">...</span>
                    <a href="#" class="page-item">24</a>
                    <a href="#" class="page-item">
                        <i class="fas fa-chevron-right"></i>
                    </a>
                </div>
            </div>
            
            <!-- 侧边栏 -->
            <div class="sidebar">
                <!-- 论坛信息 -->
                <div class="sidebar-widget">
                    <h3 class="widget-title">论坛介绍</h3>
                    <p class="forum-description">
                        专注于前端开发技术交流，包括HTML5、CSS3、JavaScript、Vue、React等框架讨论，分享最新行业动态和实战经验，适合前端开发者交流学习。
                    </p>
                    <div class="forum-stats">
                        <div class="stat-box">
                            <div class="stat-value">12.5k</div>
                            <div class="stat-label">成员</div>
                        </div>
                        <div class="stat-box">
                            <div class="stat-value">34.2k</div>
                            <div class="stat-label">帖子</div>
                        </div>
                        <div class="stat-box">
                            <div class="stat-value">2.8k</div>
                            <div class="stat-label">今日浏览</div>
                        </div>
                    </div>
                    <button class="btn-primary w-100">
                        <i class="fas fa-pen"></i> 发布新帖
                    </button>
                </div>
                
                <!-- 版主团队 -->
                <div class="sidebar-widget">
                    <h3 class="widget-title">版主团队</h3>
                    <div class="moderators-list">
                        <div class="moderator">
                            <img src="https://picsum.photos/100/100?random=10" alt="管理员头像" class="moderator-avatar">
                            <div class="moderator-info">
                                <div class="moderator-name">论坛管理员</div>
                                <div class="moderator-role">超级版主</div>
                            </div>
                        </div>
                        <div class="moderator">
                            <img src="https://picsum.photos/100/100?random=11" alt="版主头像" class="moderator-avatar">
                            <div class="moderator-info">
                                <div class="moderator-name">Web前端大神</div>
                                <div class="moderator-role">技术版主</div>
                            </div>
                        </div>
                        <div class="moderator">
                            <img src="https://picsum.photos/100/100?random=12" alt="版主头像" class="moderator-avatar">
                            <div class="moderator-info">
                                <div class="moderator-name">Vue爱好者</div>
                                <div class="moderator-role">框架版主</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 热门帖子 -->
                <div class="sidebar-widget">
                    <h3 class="widget-title">热门帖子</h3>
                    <div class="top-posts">
                        <div class="top-post">
                            <div class="top-post-number">1</div>
                            <div class="top-post-content">
                                <a href="#" class="top-post-title">2023年前端开发工程师面试题汇总（附答案）</a>
                                <div class="top-post-meta">
                                    <i class="far fa-comment"></i> 328 评论
                                </div>
                            </div>
                        </div>
                        <div class="top-post">
                            <div class="top-post-number">2</div>
                            <div class="top-post-content">
                                <a href="#" class="top-post-title">从月薪5k到25k，我用了两年时间成为资深前端</a>
                                <div class="top-post-meta">
                                    <i class="far fa-comment"></i> 256 评论
                                </div>
                            </div>
                        </div>
                        <div class="top-post">
                            <div class="top-post-number">3</div>
                            <div class="top-post-content">
                                <a href="#" class="top-post-title">前端性能优化实战：如何将页面加载时间从3秒优化到0.5秒</a>
                                <div class="top-post-meta">
                                    <i class="far fa-comment"></i> 189 评论
                                </div>
                            </div>
                        </div>
                        <div class="top-post">
                            <div class="top-post-number">4</div>
                            <div class="top-post-content">
                                <a href="#" class="top-post-title">React、Vue、Angular三大框架深度对比，2023年该学哪个？</a>
                                <div class="top-post-meta">
                                    <i class="far fa-comment"></i> 156 评论
                                </div>
                            </div>
                        </div>
                        <div class="top-post">
                            <div class="top-post-number">5</div>
                            <div class="top-post-content">
                                <a href="#" class="top-post-title">TypeScript完全入门指南，从基础到高级用法</a>
                                <div class="top-post-meta">
                                    <i class="far fa-comment"></i> 124 评论
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 相关论坛 -->
                <div class="sidebar-widget">
                    <h3 class="widget-title">相关论坛</h3>
                    <div class="related-forums">
                        <a href="#" class="related-forum">
                            <div class="related-forum-icon">
                                <i class="fas fa-server"></i>
                            </div>
                            <div class="related-forum-info">
                                <div class="related-forum-name">后端开发技术论坛</div>
                                <div class="related-forum-members">8.7k 成员</div>
                            </div>
                        </a>
                        <a href="#" class="related-forum">
                            <div class="related-forum-icon">
                                <i class="fas fa-mobile-alt"></i>
                            </div>
                            <div class="related-forum-info">
                                <div class="related-forum-name">移动应用开发论坛</div>
                                <div class="related-forum-members">6.3k 成员</div>
                            </div>
                        </a>
                        <a href="#" class="related-forum">
                            <div class="related-forum-icon">
                                <i class="fas fa-database"></i>
                            </div>
                            <div class="related-forum-info">
                                <div class="related-forum-name">数据库技术论坛</div>
                                <div class="related-forum-members">5.9k 成员</div>
                            </div>
                        </a>
                        <a href="#" class="related-forum">
                            <div class="related-forum-icon">
                                <i class="fas fa-cloud"></i>
                            </div>
                            <div class="related-forum-info">
                                <div class="related-forum-name">云计算与DevOps论坛</div>
                                <div class="related-forum-members">4.2k 成员</div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 帖子筛选标签切换
            const filterTabs = document.querySelectorAll('.filter-tab');
            filterTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    filterTabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    // 这里可以添加筛选逻辑
                });
            });
            
            // 帖子操作按钮交互
            const likeButtons = document.querySelectorAll('.post-action:has(.fa-thumbs-up)');
            likeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    this.classList.toggle('liked');
                    const icon = this.querySelector('i');
                    if (this.classList.contains('liked')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        // 更新点赞数
                        const countEl = this.querySelector('span');
                        let count = parseInt(countEl.textContent);
                        countEl.textContent = count + 1;
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        // 更新点赞数
                        const countEl = this.querySelector('span');
                        let count = parseInt(countEl.textContent);
                        countEl.textContent = count - 1;
                    }
                });
            });
            
            // 收藏按钮交互
            const bookmarkButtons = document.querySelectorAll('.post-action:has(.fa-bookmark)');
            bookmarkButtons.forEach(button => {
                button.addEventListener('click', function() {
                    this.classList.toggle('bookmarked');
                    const icon = this.querySelector('i');
                    const textSpan = this.querySelector('span');
                    
                    if (this.classList.contains('bookmarked')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        textSpan.textContent = '已收藏';
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        textSpan.textContent = '收藏';
                    }
                });
            });
            
            // 论坛导航栏交互
            const navItems = document.querySelectorAll('.forum-nav-item');
            navItems.forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    navItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                    // 这里可以添加加载不同内容的逻辑
                });
            });
        });
    </script>
</body>
</html>

